<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>表格元素</title>
		
	</head>
	<body>
		<!-- 表格布局
		 层级元素堆叠：定义表格元素：table表格的外边框+tr行元素+td单元格
		 使用表格元素：定义4行4列table>tr*4>td*4【快捷键】
		 table表格的外边框元素：属性与属性值【表格效果】
		 border边框属性
		 width与height 宽高属性 属性值：自定数值px
		 cellspacing表格外边距属性:自定数值px
		 cellpadding表格内边距属性：自定数值px
		 tr行元素：bgcolor背景颜色
		 td单元格元素：colspan跨列属性
		 口诀：夸2行，删本行的单元格
		 rowspan夸行属性-->
		
		 <h1>简单表格</h1>
		 <table border="1"width="260px"height="260px"cellspacing="0"cellpadding="30">
		 	<tr bgcolor="red">
		 		<td colspan="3">1</td>
		 		
		 		
		 		<td rowspan="3">1</td>
		 	</tr>
		 	<tr bgcolor="yellow">
		 		<td rowspan="2" colspan="2">2</td>
		 		>
		 		<td>2</td>
		 		
		 	</tr>
		 	<tr bgcolor="blue">
		 		
		 		
		 		
		 		<td>3</td>
		 	</tr>
		 	<tr bgcolor="green">
		 		<td>4</td>
		 		<td colspan="3">4</td>
		 		
		 		
		 	</tr>
		 </table >
		 <h1>复杂表格作业</h1>
		 
			<table border="1"width="260px"height="260px"cellspacing="0"cellpadding="30">
				<tr bgcolor="red">
					<td colspan="2">a</td>
					<td rowspan="2">b</td>
					
					
				</tr>
				<tr bgcolor="yellow">
					<td rowspan="2">c</td>
					<td>d</td>
					
					
				</tr >
				<tr bgcolor="blue">
					<td colspan="2">e</td>
					
					
					
				</tr>
				
			</table> 
	</body>
</html>